import React, { Component } from 'react';
import { Modal, Radio, Cascader, message   } from 'antd'
import './index.css'

const RadioGroup = Radio.Group;

// 级联组件搜索
function filter(inputValue, path) {
  return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
} 
class ProvideModal extends Component {   
    state = {
        value: 1,
        editData:{
          status:1,
          studyOrg:"",
          orgIds:[-1],
        }
    }    
    // 生命周期区域
    componentWillReceiveProps(newProps){
      //清空所选组织
        if(newProps.modalData.visible){
          this.setState({
            value:1,
            orgValue:1,
            editData:{
              status:1,
              studyOrg:"",
              orgIds:[-1],
            }
          })          
        }
    }

  
    // 方法区域
    onChange = (e) => {
        this.setState({
          value: e.target.value,
        });
    }
    onOrgChange = (e) => {
        this.setState({
          orgValue: e.target.value,
          editData: e.target.value === 1?Object.assign({},this.state.editData,{
            orgIds:[-1]
          }):this.state.editData
        });

    }  
    handleStudyOrgChange = (e) => {
        this.setState({
          editData:Object.assign({},this.state.editData,{
            studyOrg:e.target.value
          })
        });
    }
    onCascaderChange = (value) =>  {
        this.setState({          
          editData:Object.assign({},this.state.editData,{
            orgIds:value
          })
        })
    }

    showModal = () => {
        this.setState({
          visible: true,
        });
    }
    handleOk = () => {        
        let  _obj = this.$tool.getNewObj(this.state.editData);
        const state = this.state;
        if(this.state.value === 1 && ((state.orgValue == 2 && _obj.orgIds[0] != -1) || state.orgValue == 1 )){
          //中枢
          delete _obj.studyOrg;          
          _obj.orgIds = [_obj.orgIds.pop()]
        }else if(this.state.value === 2 && _obj.studyOrg !== ""){
          //明世在线
          delete _obj.orgIds;
        }else {
          message.error('请选择要发放的组织');
          return
        }        
        this.props.handleOk(_obj);
    }
    handleCancel = (e) => {
        console.log(e);
        this.props.handleCancel();
    }      
   render() {
        const state = this.state;
        const radioStyle = {
          display: 'block',
          height: '30px',
          lineHeight: '30px',
        };        
        return (
           <div>
                <Modal title="发放优惠券" visible={this.props.modalData.visible}
                wrapClassName="vertical-center-modal"
                onOk={this.handleOk} onCancel={this.handleCancel}
                >   
                    <span>所属组织：</span>
                    <RadioGroup onChange={this.onChange} value={state.value}  style={{ marginBottom:'20px' }}>
                        <Radio value={1}>中枢组织架构</Radio>
                    </RadioGroup>
                    <div className={state.value === 1?'db':'dn'} style={{ marginLeft:70 }}>
                        <RadioGroup onChange={this.onOrgChange} value={state.orgValue}>
                            <Radio style={radioStyle} value={1}>所有人</Radio>
                            <Radio style={radioStyle} value={2}>
                            <span>选择组织</span>
                            <Cascader options={this.props.orgList} value={ state.editData.orgIds } changeOnSelect  onChange={this.onCascaderChange} style={{ width:'280px',marginLeft:20 }} showSearch={{ filter }} placeholder="请选择组织架构" />
                            </Radio>
                            
                        </RadioGroup>                        
                    </div>
                    <div className={state.value === 2?'db':'dn'} style={{ marginLeft:70 }}>       
                        <RadioGroup value={state.editData.studyOrg} onChange={this.handleStudyOrgChange} >
                            <Radio className="radioBlock" value={0}>全部</Radio>
                            <Radio className="radioBlock" value={1}>正式会员</Radio>
                            <Radio className="radioBlock" value={2}>非正式会员</Radio>    
                        </RadioGroup>                                 
                    </div>
                </Modal>                    
           </div>
       )
   }
}
export default ProvideModal;